<template>
  <div id="app">
    <header  v-if="!isLogin"  class="header">
      <TopMenu />
    </header>
    <div class="container">
      <aside v-if="!isLogin && showSidebar" class="sidebar">
        <SideMenu />
      </aside>
      <main class="main">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import TopMenu from './components/TopMenu.vue'
import SideMenu from './components/SideMenu.vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useMenuStore } from './stores/menu'
import { storeToRefs } from 'pinia'

const route = useRoute()
const isLogin = computed(() => route.name === 'Login' || route.path === '/login')

const menu = useMenuStore()
const { showSidebar } = storeToRefs(menu)
</script>

<style>
/* Set ElMessage top offset to 200px */
.el-message {
  top: 100px !important;
}
</style>
